<template>
    <main-layout>
        <header>
            <div class="login-box">
                <div class="img-box" @click="$router.push('/login')">
                    <img src="https://m.mi.com/static/img/avatar.76a75b8f17.png" alt="">
                </div>
                <div class="name-box" @click="toLogin()">欢迎 18286703140</div>
            </div>
        </header>

        <div class="mypay">
            <div>我的订单</div>
            <div @click="$router.push('/cart')">全部订单 <van-icon name="arrow" /></div>
        </div>

        <div class="mypay-box">
            <div>
                <span><van-icon name="pending-payment" /></span>
                <p>待付款</p>
            </div>
            <div>
                <span><van-icon name="logistics" /></span>
                <p>待收获</p>
            </div>
            <div>
                <span><img width="20px" height="20px" src="https://m.mi.com/static/img/nav-4.d68723895f.png" alt=""></span>
                <!-- <span><van-icon name="discount" /></span> -->
                <p>退换修</p>
            </div>
        </div>

        <div class="ui-line"></div>

        <ul class="items-box">
            <li class="home-box" @click="$router.push('/home')">
                <span>大米优选<em><van-icon name="arrow" /></em></span>
            </li>
            <li class="cart-home" @click="$router.push('/cart')">
                <span>我的购物<em><van-icon name="arrow" /></em></span>
            </li>
        </ul>
        <ul class="items-box">
            <li class="pay-box">
                <span>我的优惠<em><van-icon name="arrow" /></em></span>
            </li>
            <li class="center-box">
                <span>会员中心<em><van-icon name="arrow" /></em></span>
            </li>
        </ul>
        <ul class="items-box">
            <li class="sever-box">
                <span>服务中心<em><van-icon name="arrow" /></em></span>
            </li>
            <li class="mi-home">
                <span>小米之家<em><van-icon name="arrow" /></em></span>
            </li>
        </ul>
        <ul class="items-box">
            <li class="set-box">
                <span>设置<em><van-icon name="arrow" /></em></span>
            </li>
            
        </ul>
    </main-layout>
</template>

<script>
    export default {
        data() {
            return {
                // nike: ""
            }
        },

        // created() {
        //     this.nike = localStorage.getItem('user-phone')
        // },

        methods: {
            toLogin(){
                this.$router.push('./login')
            },
        }
    }
</script>

<style lang="less" scoped>
    header{
        background: url(https://m.mi.com/static/img/bg.63c8e19851.png) center 0 #f37d0f;
        background-size: auto 100%;
        padding: 17px 0;
        display: block;
        > .login-box{
            display: flex;
            align-items: center;
            > .img-box{
                margin: 0 8px 0 17px;
                width: 52px;
                height: 52px;
                overflow: hidden;
                box-sizing: border-box;
                border-radius: 100%;
                border: 3px solid hsla(0,0%,100%,.4);
                text-align: center;
                img{
                    width: auto;
                    height: 100%;
                    margin: 0 auto;
                }
            }
            > .name-box{
                color: #fff;
                font-size: 13px;
                text-align: left;
            }
        }
    }
    .mypay {
        display: flex;
        justify-content: space-between;
        background: #fff;
        font-size: 14px;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid rgba(0,0,0,.15);
        padding-right: 20px;
        padding-left: 20px;
    }
    .mypay-box {
        display: flex;
        justify-content: space-around;
        background: #fff;
        height: 90px;
        div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        span {
            color: #bfbfbf;
            font-size: 22px;
        }
        p {
            font-size: 13px;
            line-height: 10px;
        }
    }
    .ui-line{
        height: 10px;
        background: #f5f5f5;
        overflow: hidden;
        clear: both;
    }
    .items-box{
        background: #fff;
        display: block;
        border-bottom: 10px solid #f5f5f5;
        span {
            display: block;
            width: 390px;
            height: 57px;
            padding-left: 60px;
            line-height: 57px;
            font-size: 15px;
            em {
                float: right;
                margin-right: 23px;
            }
        }
        .home-box{
            position: relative;
            background: url() no-repeat 0.32rem;
            background-size: 30px auto;
            height: 57px;
            > span{
                border-bottom: 1px solid rgba(0,0,0,.15);
            }
        }
        .cart-home{
            position: relative;
            background: url() no-repeat 0.32rem;
            background-size: 30px auto;
            height: 57px;
        }
        .pay-box {
            position: relative;
            background: url() no-repeat 0.32rem;
            background-size: 30px auto;
            height: 57px;
            > span{
                border-bottom: 1px solid rgba(0,0,0,.15);
            }
        }
        .center-box {
            position: relative;
            background: url() no-repeat 0.32rem;
            background-size: 30px auto;
            height: 57px;
        }
        .sever-box{
            position: relative;
            background: url() no-repeat 0.32rem;
            background-size: 30px auto;
            height: 57px;
            > span{
                border-bottom: 1px solid rgba(0,0,0,.15);
            }
        }
        .mi-home{
             position: relative;
            background: url() no-repeat 0.32rem;
            background-size: 30px auto;
            height: 57px;
        }
        .set-box{
            position: relative;
            background: url(https://m.mi.com/static/img/i-setting.fb9625b3f2.png) no-repeat 0.32rem;
            background-size: 30px auto;
            height: 57px;
        }
    }
</style>
